<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>股票信号</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
<style type="text/css">
.infinite-scroll-preloader {
	margin-top: -20px;
}
</style>
</head>
<body>
	<div class="page-group">
		<div class="page">
			<header class="bar bar-nav">
				<h1 class="title">交易信号</h1>
			</header>
			<nav class="bar bar-tab">
				<a class="tab-item active" href="#"> <span
					class="icon icon-home"></span> <span class="tab-label">交易信号</span>
				</a> <a class="tab-item" href="#"> <span class="icon icon-me"></span>
					<span class="tab-label">我的关注</span>
				</a> <a class="tab-item" href="#"> <span class="icon icon-star"></span>
					<span class="tab-label">推荐</span>
				</a> <a class="tab-item" href="#"> <span class="icon icon-settings"></span>
					<span class="tab-label">设置</span>
				</a>
			</nav>
			<!-- 添加 class infinite-scroll 和 data-distance  向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
			<div class="content infinite-scroll infinite-scroll-bottom"
				data-distance="100">
				<div class="list-block">
					<ul class="list-container" id="signalUl">
					</ul>
				</div>
				<!-- 加载提示符 -->
				<div class="infinite-scroll-preloader">
					<div class="preloader"></div>
				</div>
			</div>
		</div>
	</div>

	<script type='text/javascript'
		src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
	<script type="text/javascript">
		// 加载flag
		var loading = false;

		// 每次加载添加多少条目
		var itemsPerLoad = 20;

		// 是否为最后一页
		var lastPage = false;

		// 当前页
		var pageNumber = 1;
		$(function() {

			//预先加载20条
			addItems(pageNumber++);

			// 注册'infinite'事件处理函数
			$(document).on('infinite', '.infinite-scroll-bottom', function() {

				// 如果正在加载，则退出
				if (loading)
					return;

				// 设置flag
				loading = true;

				// 模拟1s的加载过程
				setTimeout(function() {
					// 重置加载flag
					loading = false;

					if (lastPage) {
						// 加载完毕，则注销无限加载事件，以防不必要的加载
						$.detachInfiniteScroll($('.infinite-scroll'));
						// 删除加载提示符
						$('.infinite-scroll-preloader').remove();
						return;
					}

					// 添加新条目
					addItems(pageNumber++);
					// 更新最后加载的序号
					lastIndex = $('.list-container li').length;
					//容器发生改变,如果是js滚动，需要刷新滚动
					$.refreshScroller();
				}, 1000);
			});

			$.init();
		});

		//从数据库中查找信号在页面显示
		function addItems(pageNumber) {
			$
					.post(
							'/stocksignal/paginateToJson',
							{
								pageNumber : pageNumber,
								pageSize : itemsPerLoad,
								signalType : 1
							},
							function(data, status) {
								console.log(data);
								lastPage = data.lastPage;
								var signalList = data.list;
								for (var i = 0; i < signalList.length; i++) {
									var li = $('<li class="item-content"></li>');
									var div1 = $('<div class="card demo-card-header-pic"></div>');

									var div2_1 = $('<div valign="bottom" class="card-header color-white no-border no-padding"></div>');
									var div2_1_1 = $('<img class="card-cover" src="http://image.sinajs.cn/newchart/daily/n/' + signalList[i].symbol + '.gif" alt="">');
									div2_1.append(div2_1_1);

									var div2_2 = $('<div class="card-content"></div>');
									var div2_2_1 = $('<div class="card-content-inner"><p class="color-gray">发表于 '
											+ signalList[i].signalDate
											+ '</p></div>');
									div2_2.append(div2_2_1);

									var div2_3 = $('<div class="card-footer"><a href="#" class="link" onclick="javascript:setFocus(\'' + signalList[i].symbol + '\')">添加到关注</a></div>');

									div1.append(div2_1);
									div1.append(div2_2);
									div1.append(div2_3);
									li.append(div1);

									$('#signalUl').append(li);
								}

							});
		}
		
		//添加关注
		function setFocus(symbol) {
			//检查是否登陆
			if(checkLogin()) {
				
			} else {
				
			}
		}	
	</script>
</body>
</html>